import React,{useState,useEffect} from "react"
import "./login.less"
import { Input } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import {useDispatch, useSelector, useHistory, useLocation} from 'umi'
const Login: React.FC = () => {
    let [user,setUser] = useState<string>("")
    let [pwd,serPwd] = useState<string>("")
    const dispatch  = useDispatch();
    const history = useHistory();
    let {query: {redirect}} = useLocation() as any;
    const {isLogin} = useSelector(models=>(models as {user:{isLogin:boolean}}).user);
    useEffect(()=>{
        if(isLogin){
        redirect = redirect?decodeURIComponent(redirect): '/';
        history.replace(redirect)
        }
    },[isLogin])
    function changeUser(event: { target: { value: string; }}){
        setUser(event.target.value)
    }
    function changePwd(e:{target:{value:string}}){
        serPwd(e.target.value)
    }
    function goLogin(){
        dispatch({
            type: 'user/login',
            payload: {user_name:user, user_pwd:pwd}
        })
    }
    return <div className="login">
        <div className="login_login-wraper__1OigH">
            <div className="userAndpwd">
                <div className="userName">
                    <Input placeholder="请输入用户名" prefix={<UserOutlined />} value={user} onChange={changeUser} />
                </div>
                <div className="password">
                    <Input.Password placeholder="请输入用户密码" value={pwd} onChange={changePwd}  />
                </div>
            </div>

            <div className="ant-form-item">

                <label className="ant-checkbox-wrapper">
                    <span className="ant-checkbox">
                        <input type="checkbox" className="ant-checkbox-input" value="" />
                        <span className="ant-checkbox-inner"></span>
                    </span>
                    <span>记住密码</span>
                </label>
                <a href="javasript:void(0)" className="a">忘记密码</a>
            </div>
            <div onClick={goLogin}><button type="submit" className="ant-btn ant-btn-primary ant-btn-lg btn"><span>登 陆</span></button></div>
        </div>
    </div>
}
export default Login